<template>
    <div class="pureNewLogContent accQuery realTimeGoods" :style="{width:realTimeServiceContent}">
        <div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
            <div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
                <i class="icon iconfont">&#xe7d8;</i>
                当前位置/游戏内分析/
                <span>{{title}}</span>
            </div>
        </div>
        <div class="choose_dialog fadeInDown animated">
            <div class="block">
                <el-form :model="form" :rules="rules" ref="form" class="demo-form-inline" :inline="true">
                    <div class="import">
                        <el-form-item label="日期范围" :label-width="formLabelWidth">
                            <el-date-picker
                                    v-model="date"
                                    type="daterange"
                                    align="left"
                                    placeholder="选择日期范围"
                                    @change='dateChange'
                                    :picker-options="pickerOptions0">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="区    服	" :label-width="formLabelWidth" prop="server">
                            <el-select v-model="form.server" filterable placeholder="请选择区服">
                                <el-option v-for="(item,index) in form.serverItmes" :label="item.label" :value="item.value" :key='index'></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物品ID" :label-width="formLabelWidth" prop='param'>
                            <el-input v-model="form.param" auto-complete="off" :width="inputWidth"></el-input>
                        </el-form-item>
                        <el-form-item label="商城名称" :label-width="formLabelWidth" prop='reason'>
                            <el-select v-model="form.reason" filterable placeholder="请选择商城名称">
                                <el-option v-for="(val,key) in form.reasonItmes" :label="val.label" :value="val.value" :key='key'></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="角色等级" :label-width="formLabelWidth" prop='rolelevel'>
                            <el-select v-model="form.rolelevel" filterable placeholder="请选择角色等级">
                                <el-option v-for="(val,key) in form.rolelevelMap" :label="val.label" :value="val.value" :key='key'></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item  class='conmit'>
                        <el-button type="primary"  icon="search" @click="search('form')" :disabled="searchable">搜索</el-button>
                        <el-button @click="reset('form')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="right_content">
            <div class="realTimeServiceTable">
                <div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
                    <span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">查询结果</span>
                    <el-button type="primary" size="mini" class="excel"  @click="excel(shopAnalysisTableHead,shopAnalysisTableDataAll,'游戏内分析-商城统计')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
                        <i class="icon iconfont">&#xe7f0;</i> 导出excel
                    </el-button>
                </div>
                <div class="realTimeServiceTableBody">
                    <template>
                        <el-table
                                v-loading="loading"
                                element-loading-text="拼命加载中"
                                :data="shopAnalysisTableData"
                                border
                                :style="{width:realTimeServiceTableWidth}"
                                :default-sort = "{prop: 'time', order: 'descending'}"
                                @sort-change='sortChange'
                        >
                            <el-table-column align="center" sortable
                                             v-for="col in shopAnalysisTableHead" :key='col.prop'
                                             :prop="col.prop" :label="col.label" :width="col.width">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <div class="block realTimeServicePage">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="dataTotal">
                    </el-pagination>
                </div>
            </div>
        </div>
        <a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
    </div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./shopAnalysis.styl"></style>
<script src="./shopAnalysis.js"></script>
